<template>

  <!-- 1vh = 1% * 视口高度 -->
  <dialog-popup :title="dialog.title"
                :visible="dialog.visible"
                :width="dialog.width"
                :height="dialog.height"
                :showSubmit="dialog.showSubmit"
                @close="onClose()"
                @submit="confirm()">


    <template v-slot:content>
      <el-form ref="refAppInfoFrom"
               size="default"
               label-position="right"
               v-model="appInfo"
               label-width="120px"
               :disabled="dialog.formDisabled"
               :rules="rules">

        <div style="height: 400px">
          <el-form-item label="平台ID" prop="platformId" class="mb10">
            <el-input type="text" v-model="appInfo.platformId" placeholder="请输入平台ID"/>
          </el-form-item>
          <el-form-item label="平台名称" prop="platformTitle" class="mb10">
            <el-input type="text" v-model="appInfo.platformTitle" placeholder="请输入平台名称"/>
          </el-form-item>
          <el-form-item label="app秘钥" prop="appSecret" class="mb10">
            <el-input v-model="appInfo.appSecret" placeholder="请输入app秘钥"/>
          </el-form-item>
          <el-form-item label="应用标识" prop="appCode" class="mb10">
            <el-input v-model="appInfo.appCode" placeholder="请输入应用标识： 例如： TOPIC-ADMIN"/>
          </el-form-item>
          <el-form-item label="应用名称" prop="appTitle" class="mb10">
            <el-input v-model="appInfo.appTitle" placeholder="请输入应用名称"/>
          </el-form-item>
          <el-form-item label="应用名称简称" prop="appAsTitle" class="mb10">
            <el-input v-model="appInfo.appAsTitle" placeholder="请输入应用名称简称"/>
          </el-form-item>
          <el-form-item label="应用类型" prop="appClazz" class="mb10">
            <el-input v-model="appInfo.appClazz" placeholder="请输入应用类型: BACK-后端;VIEW-前端"/>
          </el-form-item>
          <el-form-item label="开发语言" prop="devLang" class="mb10">
            <el-input v-model="appInfo.devLang" placeholder="请输入开发语言"/>
          </el-form-item>
          <el-form-item label="访问地址" prop="askUri" class="mb10">
            <el-input v-model="appInfo.askUri" placeholder="请输入访问地址"/>
          </el-form-item>
          <el-form-item label="部署IP" prop="deployIp" class="mb10">
            <el-input v-model="appInfo.deployIp" placeholder="请输入部署IP"/>
          </el-form-item>
          <el-form-item label="部署端口" prop="deployPort" class="mb10">
            <el-input v-model="appInfo.deployPort" placeholder="请输入部署端口"/>
          </el-form-item>
          <el-form-item label="图标" prop="iconIco" class="mb10">
            <el-input v-model="appInfo.iconIco" placeholder="请输入图标"/>
          </el-form-item>
          <el-form-item label="职能代码" prop="funcCode" class="mb10">
            <el-input v-model="appInfo.funcCode" placeholder="请输入职能代码: OSS"/>
          </el-form-item>

        </div>

      </el-form>

    </template>

  </dialog-popup>


</template>


<script setup lang="ts" name="RefAppInfo">
import {reactive, ref} from 'vue';
import {ElForm} from "element-plus/es";
import {FormInstance} from "element-plus";
import useDialogPopup, {DialogTypeEnum} from '/@/components/dialog/DialogPopup';
import useAppInfoBuilder, {AppInfo} from "/@/api/admin/model/AppInfoModel";
import DialogPopup from "/@/components/dialog/DialogPopup.vue";

/**
 * 表单的ref属性
 */
const refAppInfoFrom = ref<FormInstance>()


/**
 * 弹框属性
 */
const {dialog, onShow, onClose, showBtn} = useDialogPopup();

let {appInfo} = useAppInfoBuilder();


/**
 * 弹框
 * @param type 弹窗类型
 * @param data 展示的数据
 */
const show = (type: DialogTypeEnum, data?: AppInfo) => {
  //设置弹框的属性
  dialog.width = 60;
  dialog.height = 40;
  dialog.title = type + '应用信息';

  /* 重置表单 */
  refAppInfoFrom.value?.resetFields();

  /* 清空表单内容 */
  if (undefined !== data && null !== data) {
    /* 新表单赋值 */
    appInfo = JSON.parse(JSON.stringify(data));
  }

  showBtn(type);

  onShow();
}


/**
 * 表单验证
 */
const rules = reactive({
  platformId: [{required: true, message: '平台ID不能为空', trigger: 'blur'}],
  platformTitle: [{required: true, message: '平台名称不能为空', trigger: 'blur'}],
  appSecret: [{required: true, message: 'app秘钥不能为空', trigger: 'blur'}],
  appCode: [{required: true, message: '应用标识不能为空', trigger: 'blur'}],
  appTitle: [{required: true, message: '应用名称不能为空', trigger: 'blur'}],
  appAsTitle: [{required: true, message: '应用名称简称不能为空', trigger: 'blur'}],
  appClazz: [{required: true, message: '应用类型不能为空', trigger: 'blur'}],
  devLang: [{required: true, message: '开发语言不能为空', trigger: 'blur'}],
  askUri: [{required: true, message: '访问地址不能为空', trigger: 'blur'}],
  deployIp: [{required: true, message: '部署IP不能为空', trigger: 'blur'}],
  deployPort: [{required: true, message: '部署端口不能为空', trigger: 'blur'}]
});

//定义事件
const emits = defineEmits(['bindtap'])

const confirm = () => {
  refAppInfoFrom.value?.validate(valid => {
    if (valid) {
      emits('bindtap', appInfo)
    }
  })
}

defineExpose({
  show,
  onClose
})


</script>


<style scoped lang="scss">

</style>